CSS keyframes maken

Inleiding

De sleutelwoorden from" en to zijn gelijk aan "0%" "en"100% ". Voor compatibiliteitsredenen, geef je beter de waarden op "0" en "100%".

CSS keyframes syntaxis:

/* Percentage */
@keyframes moveTop {
    0%      { top: 0px; }
    100%    { top: 100px; }
}

/* From -> To */
@keyframes moveTop {
    from    { top: 0px; }
    to      { top: 100px; }
}

Als je een keyframe hebt gedeclareerd kan je ze toepassen op elk element met de animation CSS-regel. De animation CSS regel verwacht naast de naam van de keyframe nog enkele andere parameters. Raadpleeg voor een gedetailleerde lijst dede officiële W3C documentatie over CSS3 animations.

CSS animation syntax:

.animated { animation: moveTop 2s 3; }

Deze regel speelt moveTop keyframe drie keer af op een tijdschaal van 2 seconden.

Als we een eenvoudige set van keyframes willen maken, die de achtergrondkleur verandert van blauw naar rood naar groen naar paars en terug naar blauw, moeten we eerst een @keyframes regel ergens in onze stylesheet (het doet er niet toe waar) definiëren:

@keyframes colorchange
{
    /* individual keyframes go here */
}

Ik heb aan de verzameling de naam 'colorchange' gegeven. Je kan om het even welke naam geven maar zorg ervoor dat de naam beschrijvend is zodat u je gemakkelijk kan herkennen wat de set doet.

Vervolgens definiëren we afzonderlijke keyframes op procentpunten tijdens de gehele duur van onze animatie:

@keyframes colorchange
{
    0%   { background-color: #00F; /* from: blue */ }
    25%  { background-color: #F00; /* red        */ }
    50%  { background-color: #0F0; /* green      */ }
    75%  { background-color: #F0F; /* purple     */ }
    100% { background-color: #00F; /* to: blue   */ }
}

Wij hebben alleen de background-color eigenschap gedefinieerd, maar je kan een willekeurig aantal CSS-eigenschappen (ervan uitgaande dat het mogelijk is om ze te animeren hen) bepalen.

0% is het eerste keyframe en 100% is het laatste keyframe. Je hebt minstens twee keyframes nodig.

Als de standaardstatus van het element blauw was, kan je het begin en einde weglaten, bijvoorbeeld:

@keyframes colorchange
{
    25%  { background-color: #F00; /* red        */ }
    50%  { background-color: #0F0; /* green      */ }
    75%  { background-color: #F0F; /* purple     */ }
}

Tenslotte moet het voorlopig nog altijd het hele blok herhalen met een webkit prefix for Chrome, Safari and Opera 15+:

@-webkit-keyframes colorchange
{
    0%   { background-color: #00F; /* from: blue */ }
    25%  { background-color: #F00; /* red        */ }
    50%  { background-color: #0F0; /* green      */ }
    75%  { background-color: #F0F; /* purple     */ }
    100% { background-color: #00F; /* to: blue   */ }
}

De stijlregels met een prefix worden gewoonlijk boven de stijlregel zonder prefix gezet.

Bronnen

• CSS3 Animation Property Basics
• Vincent Tantardini, Playing with CSS3 Animations, 28/03/2014
• Joni Trythall, Responsive CSS Keyframe Animations, March 20, 2014